.vk-button {
    --vk-button-font-weight: var(--vk-font-weight-primary);
    --vk-button-border-color: var(--vk-border-color);
    --vk-button-bg-color: var(--vk-fill-color-blank);
    --vk-button-text-color: var(--vk-text-color-regular);
    --vk-button-disabled-text-color: var(--vk-disabled-text-color);
    --vk-button-disabled-bg-color: var(--vk-fill-color-blank);
    --vk-button-disabled-border-color: var(--vk-border-color-light);
    --vk-button-hover-text-color: var(--vk-color-primary);
    --vk-button-hover-bg-color: var(--vk-color-primary-light-9);
    --vk-button-hover-border-color: var(--vk-color-primary-light-7);
    --vk-button-active-text-color: var(--vk-button-hover-text-color);
    --vk-button-active-border-color: var(--vk-color-primary);
    --vk-button-active-bg-color: var(--vk-button-hover-bg-color);
    --vk-button-outline-color: var(--vk-color-primary-light-5);
    --vk-button-active-color: var(--vk-text-color-primary);
}

.vk-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--vk-button-text-color);
    text-align: center;
    /* CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。 */
    box-sizing: border-box;
    /*  1.border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计；
        2.outline 不会象border那样影响元素的尺寸或者位置，outline不占据空间；
        3.在使用border-radius时，border会跟随改变，outline确依然是一个矩形；
        4.border支持box-sizing: border-box，当有边距时，是新增了边框后在按照以前的边距处理；
        5.outline不支持box-sizing: border-box;先处理边距，后加轮廓，有点类似缩放（transform: scale(1.2);）无论轮廓大小样式不影响布局。*/
    /*CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 */
    outline: none;
    /*过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，
      像是 :hover，:active 或者通过 JavaScript 实现的状态变化。*/
    /*动画持续时间*/
    transition: .1s;
    font-weight: var(--vk-button-font-weight);
    /* user-select CSS 属性用于控制用户是否可以选择文本。 */
    user-select: none;
    vertical-align: middle;
    /* appearance CSS 属性用于控制 UI 控件的基于操作系统主题的原生外观。 */
    -webkit-appearance: none;
    background-color: var(--vk-button-bg-color);
    border: var(--vk-border);
    border-color: var(--vk-button-border-color);
    padding: 8px 15px;
    font-size: var(--vk-font-size-base);
    border-radius: var(--vk-border-radius-base);

    & + & {
        margin-left: 12px;
    }

    /*:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。*/

    &:hover,
        /*:focus CSS 伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。*/
    &:focus {
        color: var(--vk-button-hover-text-color);
        border-color: var(--vk-button-hover-border-color);
        background-color: var(--vk-button-hover-bg-color);
        outline: none;
    }

    /* CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。*/

    &:active {
        color: var(--vk-button-active-text-color);
        border-color: var(--vk-button-active-border-color);
        background-color: var(--vk-button-active-bg-color);
        outline: none;
    }

    &.is-plain {
        --vk-button-hover-text-color: var(--vk-color-primary);
        --vk-button-hover-bg-color: var(--vk-fill-color-blank);
        --vk-button-hover-border-color: var(--vk-color-primary);
    }

    /*round*/

    &.is-round {
        border-radius: var(--vk-border-radius-round);
    }

    /*circle*/

    &.is-circle {
        border-radius: 50%;
        padding: 8px;
    }

    /*disabled*/

    &.is-disabled, &.is-disabled:hover, &.is-disabled:focus,
    &[disabled], &[disabled]:hover, &[disabled]:focus {
        color: var(--vk-button-disabled-text-color);
        cursor: not-allowed;
        background-image: none;
        background-color: var(--vk-button-disabled-bg-color);
        border-color: var(--vk-button-disabled-border-color);
    }
}


@each $val in primary, success, warning, info, danger {
    .vk-button--$(val) {
        --vk-button-text-color: var(--vk-color-white);
        --vk-button-bg-color: var(--vk-color-$(val));
        --vk-button-border-color: var(--vk-color-$(val));
        --vk-button-outline-color: var(--vk-color-$(val)-light-5);
        --vk-button-active-color: var(--vk-color-$(val)-dark-2);
        --vk-button-hover-text-color: var(--vk-color-white);
        --vk-button-hover-bg-color: var(--vk-color-$(val)-light-3);
        --vk-button-hover-border-color: var(--vk-color-$(val)-light-3);
        --vk-button-active-bg-color: var(--vk-color-$(val)-dark-2);
        --vk-button-active-border-color: var(--vk-color-$(val)-dark-2);
        --vk-button-disabled-text-color: var(--vk-color-white);
        --vk-button-disabled-bg-color: var(--vk-color-$(val)-light-5);
        --vk-button-disabled-border-color: var(--vk-color-$(val)-light-5);
    }
    .vk-button--$(val).is-plain {
    --vk-button-text-color: var(--vk-color-$(val));
    --vk-button-bg-color: var(--vk-color-$(val)-light-9);
    --vk-button-border-color: var(--vk-color-$(val)-light-5);
    --vk-button-hover-text-color: var(--vk-color-white);
    --vk-button-hover-bg-color: var(--vk-color-$(val));
    --vk-button-hover-border-color: var(--vk-color-$(val));
    --vk-button-active-text-color: var(--vk-color-white);         
    }
}
.vk-button--large {
    --vk-button-size: 40px;
    height: var(--vk-button-size);
    padding: 12px 19px;
    font-size: var(--vk-font-size-base);
    border-radius: var(--vk-border-radius-base);
}

.vk-button--small {
    --vk-button-size: 24px;
    height: var(--vk-button-size);
    padding: 5px 11px;
    font-size: 12px;
    border-radius: calc(var(--vk-border-radius-base)- 1px);
}

